<template>
	<view class="content">
		<!-- 导航栏 -->
		<Navbar></Navbar>
		<!-- 轮播图 -->
		<view class="Carousel">
			<u-swiper :list="banners" keyName="image" height="120px"></u-swiper>
		</view>
		<!-- 每日推荐 -->
		<daily-recommended :hoticon="hoticon"></daily-recommended>
		<!-- 推荐歌单 -->
		<recommend :recommendlist="recommendlist"></recommend>
		<!-- 每日推荐音乐 -->
		<songs-list :songsList="songsList" :newsongs="newsongs" :newdisc="newdisc"></songs-list>
		<!-- 排行榜 -->
		<Top :recommendMv="recommendMv"></Top>
		<!-- 底部播放栏 -->
		<view class="ad">
			<play></play>
		</view>
	</view>

</template>

<script>
	import Recommend from '@/components/recommend.vue'
	import Play from '@/components/play.vue'
	import Navbar from '@/components/Navbar.vue'

	import DailyRecommended from './Dailyrecommended.vue'
	import SongsList from './rce-songs-list.vue'
	import Top from './Top.vue'

	import {
		getHotpage, //每日推荐里的图标
		getBanner, //获取轮播图
		getRecSongsSheet,
		getRceSongsList,
		getDetail,
		getNewalbum,
		getNewdisc,
		getRecommendMv, //获取视频

	} from "../../network/discover";
	export default {
		components: {
			DailyRecommended,
			Recommend,
			SongsList,
			Top,
			Play,
			Navbar
		},
		data() {
			return {
				userMessage: [],
				banners: [''], //轮播图数据获取
				hoticon: [], //主页圆环
				recommendlist: [], //推荐歌单
				songsList: [], //推荐歌曲
				newsongs: [], //新歌
				newdisc: [], //数字专辑
				recommendMv: [], //排行榜
				code: []
			}
		},
		onLoad() {
			this._getHotpage();
			this.getBanner();
			this.getRecSongsSheet();
			this.getRceSongsList();
			this.getNewalbum();
			this.getNewdisc();
			this._getRecommendMv();
		},
		methods: {
			async _getHotpage() {
				const {
					data: res
				} = await getHotpage()
				this.hoticon = res
				console.log(this.hoticon);
			},

			// 轮播图获取
			async getBanner() {
				const {
					banners
				} = await getBanner()
				banners.forEach(item => item.image = item.imageUrl)
				this.banners = banners
			},
			//获取推荐歌单
			async getRecSongsSheet() {
				const {
					result: recommendlist
				} = await getRecSongsSheet()
				this.recommendlist = recommendlist
			},

			//获取推荐歌曲
			async getRceSongsList() {
				const {
					result: data
				} = await getRceSongsList();
				for (let i = 0; i < data.length; i + 3) {
					this.songsList.push(data.splice(i, i + 3))
				}
			},

			// 获取新碟
			async getNewalbum() {
				const {
					albums: res
				} = await getNewalbum();
				for (let i = 0; i < res.length; i + 3) {
					this.newsongs.push(res.splice(i, i + 3))
				}
			},
			//获取数字专辑
			async getNewdisc() {
				const {
					products: datas
				} = await getNewdisc();
				for (let i = 0; i < datas.length; i + 3) {
					this.newdisc.push(datas.splice(i, i + 3))
				}
			},
			async _getRecommendMv() {
				const {
					data: res
				} = await getRecommendMv();
				this.recommendMv = res;
				console.log(res)
			}

		},
		created() {
			this.userMessage = uni.getStorageSync("userData")
		},

	}
</script>

<style scoped lang="scss">
	.Carousel {
		width: 90%;
		height: 100%;
		margin: 10px auto;

	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.ad {
		position: sticky;
		bottom: 0;
		z-index: 2;
		width: 100%;
	}
</style>
